<template>
    <div class="listTemplate">
        <header class="t-header">
            <mu-button flat small class="t-close" v-close><i class="iconfont iconangle-left"></i></mu-button>
            <span class="t-title">检查记录</span>
        </header>
        <section class="t-body">
            <section class="sticky">
                <section class="areaTitle">任务描述：这是任务描述这是任务描述这是任务描述这是任务描述这是任务描述这是任务描述这是任务描述这是任务描述</section>
                <mu-tabs :value.sync="activeTab" inverse color="primary" indicator-color="#fff" full-width
                         style="background-color:#fff;margin-bottom:2px;">
                    <mu-tab>概要信息</mu-tab>
                    <mu-tab>排查内容</mu-tab>
                    <mu-tab>检查记录</mu-tab>
                </mu-tabs>
            </section>
            <div class="demo-text " v-if="activeTab === 0">
                <mu-paper class="demo-paper" :z-depth="2">
                    <section class="box">
                        <p class="line-list flex_b">
                            <span class="">项目名称：中建八局企业微信项目</span>
                            <!-- <mu-button small color="success">进行中</mu-button> -->
                            <mu-badge small content="进行中" color="primary"></mu-badge>
                        </p>
                        <p class="line-list textdot">
                            <span>检查部位：大梁根基</span>
                        </p>
                        <p class="line-list">
                            <span>所属区域：A3-F5</span>
                        </p>
                        <p class="line-list textdot">
                            <span>任务描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                        </p>
                        <p class="line-list">
                            <span>检查时限：2019-12-12 23:00</span>
                        </p>
                        <p class="line-list">
                            <span>生效日期：2019-12-12 23:00</span>
                        </p>
                        <p class="line-list">
                            <span>上次检查时间：2019-12-12 23:00</span>
                        </p>
                        <p class="line-list flex_b">
                            <span>检查频率：一周三次</span>
                            <span>检查率：70%</span>
                        </p>
                        <p class="line-list flex_b">
            <span>检查人：
              <mu-avatar color="primary" size="25">兰</mu-avatar>
              兰文亮
            </span>
                            <span>责任人：
              <mu-avatar color="primary" size="25">兰</mu-avatar>
              兰文亮
            </span>
                        </p>
                    </section>
                </mu-paper>
            </div>
            <div class="demo-text lan-panel" v-if="activeTab === 1">
                <section class="areaTitle" style="border:none;">
                    <span>检查项：3个</span>
                    <span>检查内容：5个</span>
                </section>
                <mu-expansion-panel :expand="panel === 'panel1'" @change="toggle('panel1')">
                    <div slot="header">检查项1</div>
                    <p>排查内容：11111</p>
                    <p>排查内容：11111</p>
                </mu-expansion-panel>
                <mu-expansion-panel :expand="panel === 'panel2'" @change="toggle('panel2')">
                    <div slot="header">检查项2</div>
                    <p>排查内容：11111</p>
                </mu-expansion-panel>
                <mu-expansion-panel :expand="panel === 'panel3'" @change="toggle('panel3')">
                    <div slot="header">检查项3</div>
                    <p>排查内容：11111</p>
                    <p>排查内容：11111</p>
                </mu-expansion-panel>
            </div>
            <div class="demo-text " v-if="activeTab === 2">
                <mu-container ref="container" class="demo-loadmore-content" style="padding:0;">
                    <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">

                        <mu-paper class="demo-paper" :z-depth="2" v-for="(i,index) in num" :key="index"
                                  style="margin-bottom:10px;">
                            <section class="box" @click="$router.push('/Detaildf')">
                                <p class="line-list flex_b" v-if="i%2 == 0">
                      <span class="">
                        <mu-badge small content="一般问题" color="error"></mu-badge>
                        <mu-badge small content="已整改" color="success"></mu-badge>
                      </span>
                                    <mu-badge small content="一个问题" color="error"></mu-badge>
                                </p>
                                <p class="line-list flex_b" v-else>
                                    <mu-badge small content="无问题" color="success"></mu-badge>
                                </p>
                                <p class="line-list textdot">
                                    <span class="">项目名称：中建八局企业微信项目</span>
                                </p>
                                <p class="line-list textdot">
                                    <span>检查部位：大梁根基</span>
                                </p>
                                <p class="line-list" v-if="i%2 == 0">
                                    <span>问题类型：A3-F5</span>
                                </p>
                                <p class="line-list textdot" v-if="i%2 == 0">
                                    <span>问题描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                                </p>
                                <p class="line-list">
                                    <span>检查时间：2019-12-12 23:00</span>
                                </p>
                                <p class="line-list flex_b">
                                    <span>检查频率：一周三次</span>
                                    <span>检查率：70%</span>
                                </p>
                                <p class="line-list flex_b">
                      <span>检查人：
                        <mu-avatar color="primary" size="25">兰</mu-avatar>
                        兰文亮
                      </span>
                                    <span v-if="i%2 == 0">责任人：
                        <mu-avatar color="primary" size="25">兰</mu-avatar>
                        兰文亮
                      </span>
                                </p>
                                <section class="img-box">
                                    <img src="../../../../assets/img/default.png"/>
                                </section>
                            </section>
                        </mu-paper>

                    </mu-load-more>
                </mu-container>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'mainPage',
        data () {
            return {
                num: 20,
                refreshing: false,
                loading: false,
                text: 'List',
                open: false,
                activeTab: 0,
            }
        },
        mounted () {

        },
        created () {

            console.log(this.$A.GUP())
        },
        methods: {
            toggle (panel) {
                this.panel = panel === this.panel ? '' : panel;
            },
            closeBottomSheet (isnot) {
                this.open = isnot;
            },
            refresh () {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                setTimeout(() => {
                    this.refreshing = false;
                    this.text = this.text === 'List' ? 'Menu' : 'List';
                    this.num = 20;
                }, 2000)
            },
            load () {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.num += 20;
                }, 2000)
            }
        },
    }
</script>
<style lang="scss" scoped>
    .listTemplate {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
        .t-header {
            height: 0.45rem;
            width: 100%;
            color: #3D3D3D;
            box-sizing: border-box;
            padding: 5px 8px;
            position: relative;
            // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
            -border-bottom: 1px solid #dedede;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            .t-close {
                min-width: 28px;
                border-radius: 50%;
            }
            .t-title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 0.19rem;
                font-weight: 500;
            }
            .t-right-icon {
                font-size: 0.2rem;
            }
        }
        .t-body {
            height: calc(100% - 0.45rem);
            width: 100%;
            overflow: auto;
            background-color: #F8F8F8;
        }
        .t-body + .t-footer {
            height: 0.45rem;
            width: 100%;
        }
        .t-footer + .t-body {
            height: calc(100% - 0.9rem);
        }
        //自定义样式
        .areaTitle {
            font-size: 0.13rem;
            padding: 10px 20px;
            background-color: #fff;
            -border-bottom: 1px solid #dedede;
        }
        .box {
            padding: 10px 10px;
            background-color: #fff;
        }
        .line-list {
            margin: 5px 0;
            font-size: 0.15rem;
        }
        .textdot {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .sticky {
            position: sticky;
            top: 0;
            z-index: 2;
        }
        .demo-text {
            padding: 10px;
        }
    }

    .flex_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lan-panel {
        .mu-expansion-panel__expand {
            margin: 0;
            border-bottom: 1px solid #dedede;
        }
        .mu-expansion-panel {
            box-shadow: none !important;
        }
    }
</style>
<style lang="scss">
    .t-close {
        .mu-button-wrapper {
            padding: 0 !important;
        }
    }
</style>
